<template>
  <div>
    <HomeHeader />
    <!-- 最外层有一个 van-tabs 是一个大容器, 所有分类标签都在里面 -->
    <!-- 其中有一个 v-model 双向绑定当前激活项的索引 -->
    <!-- 当前是第几个标签页被选中, 这个属性就是这个标签的索引 -->
    <van-tabs
      v-model="activeCateIndex"
      :sticky="true"
    >
      <!-- 每个 van-tab 都是一个单独的标签页 -->
      <!-- 包括标签按钮, 和内容页面两个部分
      按钮的文字由 title 决定, 内容放在开闭标签中 -->
      <van-tab
        :title="item.name"
        v-for="item in categoryList"
        :key="item.id"
        color="pink"
      >
        <div
          class="content"
          v-for="item in categoryList[activeCateIndex].postList"
          :key="item.id"
        >
          <Aimg
            :title="item.title"
            :img='item.cover[0].url'
            v-if="item.cover.length<=1&&item.type==1"
          ></Aimg>
          <Video
            :title="item.title"
            :img='item.cover[0].url'
            v-if="item.cover.length<=1&&item.type==2"
          ></Video>
          <Moreimg
            :title="item.title"
            :img1='item.cover[0].url'
            :img2='item.cover[1].url'
            :img3='item.cover[2].url'
            v-if="item.cover.length>1"
          ></Moreimg>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeHeader from '../components/HomeHeader'
import Aimg from '../components/Apicture'
import Moreimg from '../components/Morepictures'
import Video from '../components/video'
export default {
  data () {
    return {
      activeCateIndex: 0,
      categoryList: []
    }
  },
  created () {
    this.$axios({
      url: '/category'
    }).then(res => {
      this.categoryList = res.data.data.map((cateList) => {
        return {
          ...cateList,
          postList: []
        }
      })
      if (this.categoryList[this.activeCateIndex].postList.length === 0) {
        this.getPost()
      }
    })
  },
  watch: {
    activeCateIndex () {
      if (this.categoryList[this.activeCateIndex].postList.length === 0) {
        this.getPost()
      }
    }
  },
  methods: {
    getPost () {
      // 当前激活分类,是在分类列表中拿出当前激活的索引
      const currentCategory = this.categoryList[this.activeCateIndex]
      console.log(currentCategory.id)
      // 从中获取 id
      const categoryId = currentCategory.id

      this.$axios({
        url: '/post',
        params: {
          category: categoryId
        }
      }).then(res => {
        currentCategory.postList = res.data.data
        // console.log(currentCategory.postList)
      })
    }
  },
  components: {
    HomeHeader,
    Aimg,
    Moreimg,
    Video
  }
}
</script>

<style lang="less" scoped>
// /deep/ .van-tab__text {
//   background-color: pink;
// }
</style>
